<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="项目名称" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入项目名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="项目状态" prop="state">
                <el-select v-model="queryParams.state" placeholder="请选择项目状态" clearable :style="{ width: '100%' }">
                    <el-option v-for="dict in dict.type.project_state" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目分类" prop="proType">
                <el-select v-model="queryParams.proType" placeholder="请选择项目分类" clearable :style="{ width: '100%' }">
                    <el-option v-for="dict in dict.type.project_classify" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item style="float: right;">
                <el-dropdown trigger="click" @command="handleAddProject">
                    <el-button type="primary">
                        新增<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">新增跟踪类项目</el-dropdown-item>
                        <el-dropdown-item command="3">新增签约类项目</el-dropdown-item>
                        <el-dropdown-item command="2">新增申报类项目</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-form-item>
        </el-form>
        <div class="bulletin-board">
            <div class="board-item" style="background-color: #4bd3ff;">
                <div class="board-title">签约类项目</div>
                <div class="board-num">{{ statistics.proSigningNum || 0 }}</div>
            </div>
            <div class="board-item" style="background-color: #ffa528;">
                <div class="board-title">申报类项目</div>
                <div class="board-num">{{ statistics.proReportNum || 0 }}</div>
            </div>
            <div class="board-item" style="background-color: #51cf70;">
                <div class="board-title">签约规模<span class="num">{{ statistics.proSigningMoney || 0 }}</span>万</div>
                <div class="board-content"><span class="collect">收：<i>{{ statistics.proSigningMoneyIn || 0
                            }}</i>万</span>
                    <span class="branch">支：<i>{{ statistics.proSigningMoneyOut || 0 }}</i>万</span>
                </div>
            </div>
            <div class="board-item" style="background-color: #ff564d;">
                <div class="board-title">申报规模<span class="num">{{ statistics.proReportMoney || 0 }}</span>万</div>
                <div class="board-content"><span class="collect">未收：<i>{{ statistics.notInMoney || 0 }}</i>万</span>
                    <span class="branch">已收：<i>{{ statistics.alreadyInMoney || 0 }}</i>万</span>
                </div>
            </div>
        </div>
        <el-table v-if="refreshTable" v-loading="loading" :data="projectList" row-key="id">
            <el-table-column prop="name" label="项目名称" width="260"></el-table-column>
            <el-table-column prop="proType" label="项目分类">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.project_classify" :value="scope.row.proType" />
                </template>
            </el-table-column>
            <el-table-column prop="forName" label="负责人"></el-table-column>
            <el-table-column prop="scale" label="项目规模(万)">
                <template slot-scope="scope">
                    {{ scope.row.scale || '--' }}
                </template>
            </el-table-column>
            <el-table-column prop="payType" label="收付款类型">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.sign_project_payment" :value="scope.row.payType"
                        v-if="scope.row.payType" />
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="项目状态" width="100">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.project_state" :value="scope.row.state" v-if="scope.row.state" />
                    <span v-if="!scope.row.state">--</span>
                </template>
            </el-table-column>
            <el-table-column label="开始时间" align="center" prop="startTime" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.startTime ? scope.row.startTime.split(" ")[0] : '--' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"
                fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                       >修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleToDetails(scope.row)"
                        >详情</el-button>
                    <el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-delete"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>

import { getProjectList, delProject, projectStatistics } from "@/api/project/index";
export default {
    name: "projectList",
    dicts: ['project_classify', 'project_state', 'sign_project_payment'],
    data() {
        return {
            // 总条数
            total: 0,
            // 遮罩层
            loading: false,
            // 显示搜索条件
            showSearch: true,
            // 表格树数据
            projectList: [],
            // 弹出层标题
            title: "",
            // 重新渲染表格状态
            refreshTable: true,
            // 查询参数
            queryParams: {
                name: undefined,
                proType: undefined,
                state: undefined,
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {},
            // 统计详情
            statistics: {}
        };
    },
    created() {
        this.getList();
        this.getProjectStatistics();
    },
    methods: {
        /** 跳转至编辑 */
        handleUpdate(val) {
            this.$router.push({
                path: '/project/projectAdd',
                query: { proType: val.proType, proId: val.proId, viewType: 'edit' }
            })
        },
        /** 跳转至详情页面 */
        handleToDetails(val) {
            this.$router.push({
                path: '/project/projectDetails',
                query: { proType: val.proType, proId: val.proId, viewType: 'read' }
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        handleAddProject(val) {
            this.$router.push({
                path: '/project/projectAdd',
                query: { proType: val, viewType: 'add' }
            })
        },
        /** 查询项目列表 */
        getList() {
            this.loading = true;
            getProjectList(this.queryParams).then(response => {
                this.projectList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 获取项目统计 */
        getProjectStatistics() {
            this.loading = true;
            projectStatistics().then(response => {
                this.loading = false;
                this.statistics = response.data;
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项？').then(function () {
                return delProject(row.id);
            }).then(() => {
                this.getList();
                this.getProjectStatistics();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        }
    }
};
</script>
<style scoped lang="scss">
.bulletin-board {
    margin: 10px 0 26px;
    display: flex;
    justify-content: space-between;

    .board-item {
        width: 24%;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 8px 14px;
        box-sizing: border-box;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        color: #fff;
        font-size: 14px;

        .board-content {
            span {
                width: 50%;
                font-size: 14px;
                display: inline-block;

                i {
                    font-style: normal;
                    font-size: 17px;
                    padding-right: 4px;
                }
            }

        }

        .board-title {
            font-size: 16px;
            .num {
                font-size: 17px;
                padding-left: 4px;
                padding-right: 2px;
            }
        }

        .board-num {
            font-size: 18px;
        }
    }
}
</style>